
<template>
	<div class="gs-wrap" v-show="isShowQuan">
		<div class="quan-container">
			<div class="quan-herder">
				请选择要兑换的券
			</div>
			<div class="quan-body">
				<div class="quan-list" v-for="(quan, index) in quanList" @click="onChecked(index)" :ca="'灌水活动_兑券列表$'+quan.couponTemplateName">
					<div class="quan-item"  v-bind:class="{'quan-bg-no': !quan.isQuanEnable}">
						<div class="quan-left">
							<span class="price" v-bind:class="{'price-no': !quan.isQuanEnable}"><em class="price-text">{{ quan.couponValue }}</em><em class="price-danwei">元</em></span>
						</div>
						<div class="quan-center">
							<div class="quan-content">
								<div class="quan-title">{{ quan.couponTemplateName }}</div>
								<div class="quan-scope">{{ quan.couponDesc }}</div>
							</div>
						</div>
						<div class="quan-right" v-if="quan.isQuanEnable" v-bind:class="{'quan-right-no': !quan.isChecked}" >
							
						</div>
					</div>
				</div>
			</div>
			<div class="quan-footer">
				<div class="btn-duihuan" v-bind:class="{'btn-duihuan-no': !currentQuanEnable}" @click="duiquanAction" ca="灌水活动_兑券列表$点击兑换">点击兑换</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	import common from '../../../assets/js/common';
	import Vue from 'vue';
	import {Toast} from 'mint-ui';
	
	export default{
		data: function () {
		    return {
		    	isShowQuan: false,
		        isQuanEnable: true,
		        currentQuanEnable: false,
		        currentCouponTemplateNo:'',
		        quanList:[]
		    };
		},
		components: {},
		created: function (){
			var _this = this;
	        
		},
		methods: {
			showQuanListPage: function () {
				this.isShowQuan = true;
			},
			hideQuanListPage: function () {
				this.isShowQuan = false;
			},
			getQuanList: function(){
				var _this = this;
				var longitude = sessionStorage.getItem("global_longitude");
                var latitude = sessionStorage.getItem("global_latitude");
                var cityName = sessionStorage.getItem("global_cityName");
				var paramObj = {
					longitude: longitude,
                	latitude: latitude,
                	cityName: cityName
				};
				console.log("getQuanList:"+JSON.stringify(paramObj));
		    	_this.$http.post(common.isdev() + "/water/couponList.htm?t="+Date.now(), paramObj).then(function (res) {
		    		console.log(res);
		    		if (res.body.result == 1) {
		    			var _quanList = res.body.obj;
		    			for (var i=0; i<_quanList.length; i++) {
		    				var _quan = _quanList[i];
		    				_quan.isQuanEnable = false;
		    				if (_quan.maxNum && _quan.grantNum < _quan.maxNum) {
		    					_quan.isQuanEnable = true;
		    				}
		    			}
		    			_this.quanList =  _quanList; 
		    		}
		    		
		    		//打点
		            common.ANA_AnalyticsScan();
		    		
		    	},function (err) {
		        	Toast("系统繁忙，请稍后再试");
		    	})
			},
			//显示活动说明
		    duiquanAction: function(){
		    	if (this.currentQuanEnable == false) {
		    		return;
		    	}
		    	var _this= this;
		    	
		    	var longitude = sessionStorage.getItem("global_longitude");
                var latitude = sessionStorage.getItem("global_latitude");
                var cityName = sessionStorage.getItem("global_cityName");
		    	//_this.isShowQuan = false;
		    	//_this.$parent.$refs.qdgsdialog.showDialog();
		    	var paramObj = {
		    		couponTemplateNo: this.currentCouponTemplateNo,
		    		longitude: longitude,
                	latitude: latitude,
                	cityName: cityName
		    	};
		    	/*
		    	var paramObj = {
		    		couponTemplateNo: this.currentCouponTemplateNo,
		    		longitude: 	121.48,
                	latitude: 31.22,
                	cityName: '上海市'
		    	};*/
		    	console.log("duiquanAction:"+JSON.stringify(paramObj));
		    	_this.$http.post(common.isdev() + "/water/grantCoupon.htm", paramObj).then(function (res) {
		    		console.log(res);
		    		if (res.body.result == 1) {
		    			_this.isShowQuan = false;
		    			_this.$parent.$refs.qdgsdialog.showDialog();
		    		}else {
		    			//Toast("今天你已经兑换过券了");
		    			Toast(res.body.msg);
		    		}
		    		
		    	},function (err) {
		        	Toast("系统繁忙，请稍后再试");
		    	})
		    },
		    onChecked: function (index){
		    	
		    	var _quanList = this.quanList;
		    	for (var i = 0; i < _quanList.length; i++) {
		    		var _quan = _quanList[i];
		    		if (index == i) {
		    			if (_quan.isQuanEnable) {
		    				_quan.isChecked = true;
		    				this.currentCouponTemplateNo = _quan.couponTemplateNo;
		    				this.currentQuanEnable = true;
		    			}else {
		    				this.currentQuanEnable = false;
		    			}
		    			
		    			console.log("index == i");
		    		}else {
		    			_quan.isChecked = false;
		    		}
		    		
		    	}
	    		this.quanList = [];
	    		this.quanList = _quanList;
		    	
		    }
		}
	}
</script>

<style lang="scss">
	@import "../../../assets/css/reset.scss";
	@import "../../../assets/css/common.scss";
	html,body {
		height: 100%;
	}
	.gs-wrap {
		width: 100%;		
		position: relative;
		.quan-container {
			//padding-top: 15.8rem;
			width: 100%;
			.quan-herder {
				margin: 0 auto;
				width: 28.6rem;
				height: 4.5rem;
				border-bottom: 1px dashed #ffffff;
				line-height: 4.5rem;
				text-align: center;
				font-size: 1.6rem;
				color: #ffffff;
			}
			.quan-body {
				width: 100%;
				padding-top: 0.6rem;
				.quan-list {
					width: 100%;
					.quan-item {
						margin: 0.6rem auto 0;
						width: 30.6rem;
						height: 10.1rem;
						background: url("../../../assets/image/qdgs/gs-quan-bg-yes.png") center top no-repeat;
						background-size: 30.6rem 10.1rem;
						.quan-left {
							float: left;
							width: 8.8rem;
							height: 10.1rem;
							line-height: 10.1rem;
							text-align: center;
							.price {
								color: #f3536b;
								.price-text {
									//font-size: 4rem;
									font-size: 3rem;
								}
								.price-danwei {
									//font-size: 2.2rem;
									font-size: 1.65rem;
								}
							}
							.price-no {
								color: #aaaaaa;
							}
						}
						.quan-center {
							float: left;
							width: 17.3rem;
							height: 10.1rem;
							position: relative;
							.quan-content {
								position: absolute;
								top: 50%;
								left: 0;
								padding-left: 1.5rem;
								-webkit-transform: translateX(0) translateY(-50%);
								transform: translateX(0) translateY(-50%);
								.quan-title {
									font-size: 1.8rem;
									color: #243742;
								}
								.quan-scope {
									font-size: 1.3rem;
									color: #8392a0;
								}
							}
							
						}
						.quan-right {
							float: left;
							width: 4.5rem;
							height: 10.1rem;
							background: url("../../../assets/image/qdgs/gs-quan-checked.png") center left no-repeat;
							background-size: 2.1rem 2.1rem;
						}
						.quan-right-no {
							background: url("../../../assets/image/qdgs/gs-quan-unchecked.png") center left no-repeat;
							background-size: 2.1rem 2.1rem;
						}
						&:after {
							clear: both;
							content: '';
							display: block;
							overflow: hidden;
						}
					}
					.quan-bg-no {
						background: url("../../../assets/image/qdgs/gs-quan-bg-no.png") center top no-repeat;
						background-size: 30.6rem 10.1rem;
					}
				}
				
			}
			.quan-footer {
				margin-top: 1.8rem;
				padding-bottom: 2rem;
				.btn-duihuan {
					display: block;
					margin: 0 auto;
					width: 25.5rem;
					height: 3.7rem;
					border-radius: 1.85rem;
					
					line-height: 3.7rem;
					text-align: center;
					font-size: 1.6rem;
					font-weight: 800;
					
					background: #fff000;
					color: #f52642;
					
				}
				.btn-duihuan-no {
					background: #d2d2d2;
					color: #ffffff;
				}
			}
			
		}
	}
</style>
